<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org/thymeleaf/layout"
      layout:decorator="layout" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        .c-container{
            margin-top: 20px;
            width:100%;
        }
        .c-input-inline{
            width: 470px!important;
        }
        .input-width{
            width: 460px;
        }
    </style>
</head>
<body>
<script src="../layui/layui.js"></script>
<script>

    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form;



    });

    function loadBridgeData(){
        layui.use('table', function() {
            var table = layui.table;
            var columns = [
//                {field: 'ID_', title: 'ID', width: 70, sort: true, fixed: 'left'} ,
//                {field: 'NO_', title: '序号', width: 80, sort: true}  ,
                {field: 'LEVEL_', title: '楼层', width: 80, sort: true}
                , {field: 'CODE_', title: '编码', width: 200}
//                , {field: 'V1_', title: 'V(梁)', width: 100}
                , {field: 'V2_', title: '上部上排角筋', width: 120}
                , {field: 'V3_', title: '上部上排中间筋', width: 129}
                , {field: 'V4_', title: '上部上排贯通筋', width: 129}
                , {field: 'V5_', title: '上部下排钢筋', width: 120}
                , {field: 'V6_', title: '箍筋', width: 100}
                , {field: 'V71_', title: '构造钢筋', width: 100}
                , {field: 'V7_', title: '附加箍筋', width: 100}
//                , {field: 'V8_', title: '架力筋', width: 100}
                , {field: 'V10_', title: '下部下排角筋', width: 120}
                , {field: 'V11_', title: '下部下排中间筋', width: 129}
                , {field: 'V9_', title: '下部上排', width: 100}
                , {field: 'V12_', title: '抗扭钢筋', width: 100}
                ]
            //第一个实例
            table.render({
                elem: '#bridge'
                ,height: 400
                ,limit: 100
                ,limits:[50,100,200,300]
                ,url: '/bridges'
                ,page: true
                ,cols:[columns]
            });
            //监听行双击事件
            table.on('rowDouble(test)', function(obj){
                //obj 同上
                console.log('-------obj-------',obj);
                loadBridgeColumns(obj.data['ID_'])
                document.getElementById("bridge_code").innerHTML = obj.data['CODE_']
            });
        })
    }

    function loadBridgeColumns(id){
        layui.use('table', function() {
            var table2 = layui.table;
            var columns = [{field: 'ID_', title: 'ID', width: 70, sort: true, fixed: 'left'}
                , {field: 'NO_', title: '序号', width: 70, sort: true}
                , {field: 'CODE_', title: '编码', width: 100}
                , {field: 'UNIT_', title: '单位', width: 300}
                , {field: 'VALUE_', title: '值', width: 300}
            ]
            //第一个实例
            table2.render({
                elem: '#bridge_columns'
                ,height: 400
                ,limit: 50
                ,url: '/bridges/columns?id='+id
                ,page: true
                ,cols:[columns]
            });
        })
    }

    function loadWallData(){
        layui.use('table', function() {
            var table = layui.table;
            var columns = [
//                {field: 'ID_', title: 'ID', width: 70, sort: true, fixed: 'left'},
//                 {field: 'NO_', title: '序号', width: 80, sort: true} ,
                {field: 'LEVEL_', title: '楼层', width: 80, sort: true}
                , {field: 'CODE_', title: '编码', width: 200}
                , {field: 'V1_', title: '水平筋', width: 100}
                , {field: 'V2_', title: '垂直筋', width: 120}
                , {field: 'V3_', title: '拉筋', width: 129}
            ]
            //第一个实例
            table.render({
                elem: '#wall'
                ,height: 400
                ,limit: 100
                ,limits:[50,100,200,300]
                ,url: '/walls'
                ,page: true
                ,cols:[columns]
            });
            //监听行双击事件
            table.on('rowDouble(test)', function(obj){
                //obj 同上
                console.log('-------obj-------',obj);
                loadBridgeColumns(obj.data['ID_'])
                document.getElementById("wall_code").innerHTML = obj.data['CODE_']
            });
        })
    }

    function request(method,url,data, success){
        var loading = layer.load(0, {
//            content: '正在计算中...',
            shade: [0.4, '#000'],
            shade: false,
            time: 60*1000
        });
        layui.$.ajax({
            //添加请求头
            headers: {
//                'Token': $.cookie("token"),
                "Content-Type": "application/json;charset=UTF-8"
            },
            url:url,
            dataType: "json", //数据格式
            data: JSON.stringify(data),
            type: method,
            beforeSend:function () {
            },
            success:function(data){
//                layer.close(loading);
                if(success){
                    success(data)
                }
            },
            complete: function () {

                layer.close(loading);
            },
            error: function () {
                //请求出错处理
                layer.alert('系统繁忙，请稍后', {
                    icon: 5,
                    title: "提示"
                });
            }
        });
    }

    /**
     * 发送post请求
     * @param {发送请求路径} url
     * @param {JSON数据} data
     * @param {发送成功回调函数} success
     */
    function apiPost(url, data, success) {
        request('post', url, data, function (res) {
            return success(res);
        });
    }

    /**
     * 发送GET请求
     * @param {发送请求路径} url
     * @param {JSON数据} data
     * @param {发送成功回调函数} success
     */
    function apiGet(url, data, success) {
        request('get', url, data, function (res) {
            return success(res);
        });
    }

    function loadData(){
        loadBridgeData();
        loadWallData();
    }

</script>
<div class="layui-container c-container">
    <div class="layui-row">
        <!--<div class="layui-col-md9">-->
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">excel文件夹</label>
                    <div class="layui-input-inline c-input-inline">
                        <input type="text" id="srcPath" name="srcPath" required value="E:\工作\项目\bim\demo" lay-verify="required" placeholder="E:\cdm\excel" autocomplete="off" class="layui-input input-width">
                    </div>
                    <div class="layui-form-mid layui-word-aux">只需要设置excel的文件夹路径</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">sqlite文件</label>
                    <div class="layui-input-inline c-input-inline">
                        <input type="text" name="desPath" required value="E:\工作\项目\bim\demo" lay-verify="required" placeholder="E:\cdm\cdm.ydb" autocomplete="off" class="layui-input input-width">
                    </div>
                    <div class="layui-form-mid layui-word-aux">生成的sqlite路径或者具体文件路径</div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" lay-submit lay-filter="formDemo">立即计算</button>
                        <button type="button" class="layui-btn" onclick="loadData()">加载结果</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>


                <!--<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">梁</li>
                        <li>墙柱</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <table id="bridge" lay-filter="test"></table>
                            <div id="bridge_code"></div>
                            <table id="bridge_columns" lay-filter="test2"></table>
                        </div>
                        <div class="layui-tab-item">
                            <table id="wall" lay-filter="test"></table>
                            <div id="wall_code"></div>
                            <table id="wall_columns" lay-filter="test2"></table>
                        </div>
                    </div>
                </div>-->

                <div>
                    <table id="bridge" lay-filter="test"></table>
                    <div id="bridge_code"></div>
                    <table id="bridge_columns" lay-filter="test2"></table>
                </div>
                <div>
                    <table id="wall" lay-filter="test"></table>
                    <div id="wall_code"></div>
                    <table id="wall_columns" lay-filter="test2"></table>
                </div>
            </form>
        <!--</div>-->
    </div>
</div>

<script>

    function loadData(){
        loadBridgeData();
        loadWallData();
    }

    layui.use('element', function(){
        var element = layui.element;

        //…
    });

    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
//            layer.msg("------"+JSON.stringify(data.field));
            apiPost('/convertV2',data.field,function(res){
                console.log("--------",res)
                if(res && res.code == 0){
                    layer.msg('计算成功');
                    var srcPath = document.getElementById("srcPath").value
                    if(srcPath.indexOf('梁')>-1){
                        loadBridgeData();
                    }else{
                        loadWallData();
                    }


                }else{
                    layer.msg('操作失败'+res.msg);
                }
            })
            return false;
        });
    });
</script>

</body>
</html>